<template>
        <el-container>
        <el-header style="text-align: center;">
            <el-row>
                <el-col :span="23">
                    <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">登录页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/main/sysResult">年级-学生</a></el-breadcrumb-item>
                    <el-breadcrumb-item >分页查询</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>   
            </el-row>
                <h1>年级-学生表</h1>
        </el-header>
        <!-- el-main 是elementUI的布局容器，用于放置页面的主要内容，
         类似的还有el-container、el-aside、el-footer、el-header -->
        <el-main style=" justify-content: center; align-items: center;">
     
     <el-table
        :data="gradeList"
        @selection-change="handleSelectionChange"
        height="400px"
        stripe
        style="width: 100%; margin: 0 auto;">
        <!-- 查询列表的表格，要与pojoTestTable绑定 -->
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" width="50px" align="center">
        </el-table-column>
        <el-table-column prop="studentName" label="学生姓名" width="auto" align="center">
            
        </el-table-column>
        <el-table-column prop="gradeName" label="年级名称" width="auto" align="center">
        </el-table-column>
        <el-table-column prop="gradeId" label="年级编号" width="auto" align="center">
        </el-table-column>
        <el-table-column  align="center" label="删除" width="80px" fixed="right"> 
        <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
        </template>
        </el-table-column>
         <el-table-column  
            align="center"
            label="修改"
            width="80px"
            fixed="right"
            > 
        <template slot-scope="scope">
            <el-button  type="primary" icon="el-icon-edit"  @click="getById(scope.row.id)"></el-button>
        </template>
        </el-table-column>
        </el-table>

        </el-main>
        </el-container>
</template>
<script>
export default {
    name: 'GradePage',
    data () {
        return {
            gradeList: [],
            student:{
                studentName: null,
                studentNo: null,
                loginPwd: null,
                sex: null,
                gradeId: null,   
                phone: null,
                address: null,
                bornDate: null,
                email: null,
                identityCard: null,
            },
            grade: {
                gradeName: null,
                gradeId: null,
                studentList: [],
            },
        };
    },
    mounted: function () {
        this.getList();
    },
    methods: {
        getList() {
            this.$axios.get('http://127.0.0.1:8082/grade/getList').then(res => {
                console.log("年级list",res);
                this.gradeList = res.data.data;
            }).catch(err => {
                console.log(err);
            });
        },

        /**
         * 选择行对象
         * @param rows 行数据
         */
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);

          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
        },
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.names = selection.map(item => item.name);
        console.log(this.ids);
        console.log(this.names);
      },
    }
};

</script>
<style scoped>
    
</style>